<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view class="close">
						<tui-icon name="shut" :size="26" color="#999"  @click="close"></tui-icon>
					</view>
				</view>
			</tui-list-cell>
			<view class="tui-pay-amuont"><text>￥{{data.money}}</text></view>
			<radio-group>
				
				<!-- <tui-list-cell unlined padding='10rpx 30rpx' @click="tabs(3)">
					<label class="tui-pay-item">
						<tui-icon name="alipay" :size="26" color="#3a73f6"></tui-icon>
						<text class="text">支付宝支付</text>
						<view class="tui-radio">
							<radio color="#000" name="pay" :checked="index==3"></radio>
						</view>
					</label>
				</tui-list-cell>
				<tui-list-cell unlined padding='10rpx 30rpx' @click="tabs(2)">
					<label class="tui-pay-item">
						<tui-icon name="wechat" :size="26" color="#51a938"></tui-icon>
						<text class="text">微信支付</text>
						<view class="tui-radio">
							<radio color="#000" name="pay" :checked="index==2"></radio>
						</view>
					</label>
				</tui-list-cell>
				<tui-list-cell unlined padding='10rpx 30rpx' @click="tabs(5)">
					<label class="tui-pay-item">
						<tui-icon name="bankcard" :size="26" color="#3a73f6"></tui-icon>
						<text class="text">银联支付</text>
						<view class="tui-radio">
							<radio color="#000" name="pay" :checked="index==5"></radio>
						</view>
					</label>
				</tui-list-cell> -->
				<tui-list-cell unlined padding='10rpx 30rpx'  @click="tabs(1)">
					<label class="tui-pay-item">
						<tui-icon name="wealth-fill" :size="26" color="#f19a02"></tui-icon>
						<text class="text">余额支付</text>
						<view class="tui-radio">
							<radio color="#000" name="pay" :checked="index==1"></radio>
						</view>
					</label>
				</tui-list-cell>
				<tui-list-cell unlined padding='10rpx 30rpx'  @click="tabs(2)">
					<label class="tui-pay-item">
						<tui-icon name="wealth-fill" :size="26" color="#f19a02"></tui-icon>
						<text class="text">双积分支付</text>
						<view class="tui-radio">
							<radio color="#000" name="pay" :checked="index==2"></radio>
						</view>
					</label>
				</tui-list-cell>
			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" type="black" shape="square" shadow  @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	export default {
		name: 'tPayWay',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			page:{
				type:Number,
				default:1
			},
			data:{
				type:Object,
				default: function() {
					return {
						money: 0, 
						yue: 60
					}
				}
			},
		},
		data() {
			return {
				index:3
			};
		},
		methods: {
			close() {
				this.$emit("close",{})
			},
			btnPay(){
				this.close();
				this.$emit("finish",this.index)
			},
			tabs(e){
				this.index = e
			},
		}
	}
</script>

<style scoped lang="scss">
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		view{font-size: 34rpx;}
	}
	.close{
		position: absolute;top: 0rpx;right: 20rpx;
	}
	.tui-pay-amuont {
		padding-top: 30rpx;
		color: #000;
		text-align: center;
		font-weight: 500;
		font-size: 40rpx;font-weight: bold;
	}
	.text{margin-left: 20rpx;}
	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 100rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>